{% extends "partials/layout.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/css/detail.css"/>
{% endblock %}

{% block content %}
<div class="container detail">
  <ul id='navs' class="nav">
    <li><a href="/pro_shiji.html">产品中心</a></li>
    <!-- <li><a href="/pro_haocai.html">实验耗材</a></li>
    <li>国产非灭菌吸头</li> -->
  </ul>
  <div class="top">
    <div class="slider">
      <img src="/static/img/f1_1.png" />
    </div>
    <div class="right">
      <p class="title">国产非灭菌吸头</p>
      <p class="brand">品牌：Biosharp</p>
      <p class="remark">
        - 采用高品质聚丙烯（PP）材质<br />
        - 吸附液体时低残留、低吸附 <br />
        - 创新超长设计，减少移液器带来的污染<br />
        - 袋装，非无菌，可高温高压灭菌 <br />
        - 吸嘴尾部呈柔软弹性椎体，配适大多数品牌移液器
      </p>
      <!-- <p class="origin">原价 : <i>¥${market_price}</i></p>
      <p class="price">现价 : <span><i>¥</i>${price}</span></p>
      <p class="stock">库存 : 仅剩<span>${stock}</span>件</p> 
      <p class="btn">立即咨询</p>-->
    </div>
  </div>

  <ul class="tabs">
    <li class="on">规格参数</li>
  </ul>
  <div class="box">
    <div class="tab-content">${info_param}</div>
  </div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" src="/static/js/data.js"></script>
<script type="text/javascript">
  (function(){
    console.log(value_data)
    init();
    function init(){
      initNavs();
    }
    function initNavs(){
      var $navs = $('#navs');
      let typeMap = {
        haocai:{page:'pro_haocai.html',name: '实验耗材'},
        yiqi:{page:'pro_yiqi.html',name: '小型仪器'}
      };
      var type = utility.getQueryParams('type') || 'haocai';
      var typeObj = typeMap[type];
      $navs.append('<li><a href="/'+ typeObj.page + '">'+ typeObj.name +'</a></li>');

      var id = utility.getQueryParams('id');
      var proData = value_data[type].find(item => item.id == id);
      $navs.append('<li>'+ proData.title +'</li>');

    }

    function initCenter(navIndex){
      var tplItem = $('#tmpPro1').find('ul').html();
      var tplGroup = $('#tmpPro1').html();
      var groups = [];
      for(var i = 0; i < data[navIndex].groups.length; i++){
        var itemList = data[navIndex].groups[i].list;
        var items = [];
        for(var j = 0; j < itemList.length; j++){
          items.push(utility.tmplFormat(tplItem, itemList[j]));
        }
        var $group = $("<div>"+ utility.tmplFormat(tplGroup, data[navIndex].groups[i]) + '</div>');
        $group.find('ul').html(items.join(''));
        groups.push($group.html())
      }
      $('.center .list').html(groups.join(''));
    }
  })();
</script>
{% endblock %}